<template>
  <el-dialog
    :model-value="props.visible"
    append-to-body
    titile="选择你要用的公司"
  >
    <div class="cplist">
      <el-table
        :data="tableData"
        style="width: 100%; height: 100%"
        @row-click="handleRowClick"
      >
        <el-table-column prop="id" label="公司id" width="180" />
        <el-table-column prop="name" label="公司名称" width="180" />
        <el-table-column prop="isVue" label="是否使用vue">
          <template #default="scope">
            {{ scope.row.isVue ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column prop="isReact" label="是否使用React">
          <template #default="scope">
            {{ scope.row.isReact ? '是' : '否' }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        background
        layout="prev, pager, next,sizes"
        :total="total"
        class="mt-4"
        :page-sizes="[5, 10, 30, 50]"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import {
  defineProps,
  defineEmits,
  reactive,
  ref,
  computed,
  onMounted
} from 'vue'
// 导入自定义属性
import { getCompany } from '@/api/company'
// 导入公司信息数据接口

// 我这个组件需要接收什么外部传递进来的值
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
// 分页的总数
const total = ref(0)
// 表格数组
const tableData = ref([])
// 每页显示的数据个数
const $limit = ref<number>(10)
// 当前页码
const curPage = ref<number>(1)
// 跳过数据条数
const $skip = computed(() => (curPage.value - 1) * $limit.value)

// 获取work表格中的数据并渲染
const getList = async () => {
  const rss = await getCompany({
    // 将当前设置的值带入参数来置换默认值
    $limit: $limit.value,
    $skip: $skip.value
  })
  // 解构赋值，将rss中的data提取出来并定义
  const { data } = rss
  // 从数据库中获取的数据来置换页面的默认值
  tableData.value = data.data
  total.value = data.total
}
const handleSizeChange = (res: number) => {
  $limit.value = res
  getList()
}
const handlePageChange = (res: number) => {
  curPage.value = res
  getList()
}

// 挂载完成之后执行一次
onMounted(() => {
  getList()
})
</script>
<script lang="ts">
export default {
  name: 'companyQata'
}
</script>
